<#include "/common/_layout.html">
<#assign pageJavascript>
<script type="text/javascript" src="/assets/daterangepicker/momen.js"></script>
<script type="text/javascript" src="/assets/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="/assets/echarts/echarts.min.js"></script>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('container'));
var chart = echarts.init(document.getElementById('container'));
$(function(){
	$('#daterange').daterangepicker({
		locale : {
			format : 'YYYY-MM-DD',
			separator : '~',
			applyLabel : '确定',
			cancelLabel : '取消',
			fromLabel : 'From',
			toLabel : 'To',
			customRangeLabel : '自定义',
			daysOfWeek : [ '日', '一', '二', '三', '四', '五','六' ],
			monthNames : [ '1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12' ],
			firstDay : 1
		},
		startDate : moment().subtract(30, 'days'),
		endDate : moment().subtract(1, 'days'),
		maxDate : moment().subtract(1, 'days'),
		ranges : {
			'1日' : [ moment().subtract(1, 'days'),
						moment().subtract(1, 'days') ],
			'7日' : [moment().subtract(7, 'days'),
					moment().subtract(1, 'days') ],
			'14日' : [ moment().subtract(14, 'days'),
					moment().subtract(1, 'days') ],
			'30日' : [ moment().subtract(30, 'days'),
					moment().subtract(1, 'days') ]
		}
	});
	$("#querybtn").click(function(){
		$.post('/admin/device/device/onlinereportm', {daterange : $("#daterange").val(),mac : '${(device.id)!}'},function(data) {
			if($("#daterange").val().substring(0, 10) == $("#daterange").val().substring(11, 21)){
				var option = {
						title: {left: 'center',text: '设备当天行驶里程',subtext:data.sname},
					    tooltip: {trigger: 'axis',formatter:'{c}km（{b}时）'},
					    xAxis: {data: data.datetimes},
					    yAxis: {axisLabel: {formatter: '{value}km'}},
					    series: [{name:data.sname,type:'bar',data: data.sumtimes}]
					};
			}else{
				var option = {
						title: {left: 'center',text: '设备每天行驶里程',subtext:data.sname},
					    tooltip: {trigger: 'axis',formatter:'{c}km（{b}）'},
					    xAxis: {data: data.datetimes},
					    yAxis: {axisLabel: {formatter: '{value}km'}},
					    series: [{name:data.sname,type:'bar',data: data.sumtimes}]
					};	
			}
			chart.setOption(option);
		});
	});
	$("#querybtn").click();
});
</script>
</script>
</#assign>
<#assign pageCss>
<link href="/assets/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</#assign>
<@layout pageTitle="设备耗电和里程统计" pageJavascript=pageJavascript pageCss=pageCss>		
<#include "/admin/device/device/_menu.html">
<div class="panel panel-default">
  <div class="panel-body filter">
	<div class="form-inline">
		<div class="form-group">
			<label for="pid">产品</label> 
			    	<#if device??>
    		<input type="text"  value="${(product.pname)!}"  disabled class="form-control">
    	<#else>
	    	<select name="device.pid" id="pid" class="form-control">
			<#if plist??>
			<#list plist as data>
			<option value="${data.id}">${data.pname}</option>
			</#list>
			</#if>	
			</select>
		</#if>
			<label for="mac">mac地址</label> 
			<input type="text" id="id" value="${(device.id)!}" name="device.id" datatype="s12-16" <#if device??> disabled</#if> class="form-control">
			<label>时间</label>
			<input type="text" id="daterange" class="form-control"> 
		</div>
		<button id="querybtn" class="btn btn-default">查询</button>
	</div>
  </div>
</div>
<div id="container" class="col-xs-12" style="height:600px"></div>
</@layout>